<template>
  <!-- 竖柱状图 -->
  <div ref="main" style="width: auto;height:300px;"></div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  components: {},
  data() {
    return {
      option: {
        noDataLoadingOption: {
          text: "暂无数据",
          effect: "bubble",
          effectOption: {
            effect: {
              n: 0
            }
          }
        },
        color: Style.color,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        legend: {
          data: ["Growth", "奇数", "偶数"],
          bottom: 10
        },
        grid: {
          ...Style.grid
        },
        xAxis: {
          axisTick: {
            show: false
          },
          type: "category",
          data: ["1次", "2次", "3次", "4次", "5次"],
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid"
            }
          }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "奇数",
            type: "bar",
            data: [320, 302, 301, 200, 110],
            animationDelay: function(idx) {
              return idx * 10;
            },
            itemStyle: {
              color: "#b39ddb"
            }
          },
          {
            name: "偶数",
            type: "bar",
            data: [120, 132, 101, 100, 210],
            animationDelay: function(idx) {
              return idx * 10 + 100;
            },
            itemStyle: {
              color: "#5596e6"
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      }
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    let myChart = this.$echarts.init(this.$refs.main);
    myChart.setOption(this.option);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
</style>
